<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="admin/head :: head"></div>

    <title>视频表单</title>
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <input type="hidden" name="id" th:value="${sysConfig eq null ? '' : sysConfig.id}"/>

        <div class="layui-form-item">
            <label for="L_type" class="layui-form-label">
                类型
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_type" name="type" required="" lay-verify="required" autocomplete="off" class="layui-input" th:value="${sysConfig eq null ? '' : sysConfig.type}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_column" class="layui-form-label">
                属性
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_column" name="column" required="" lay-verify="required" autocomplete="off" class="layui-input" th:value="${sysConfig eq null ? '' : sysConfig.column}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="select" class="layui-form-label">
                上传图片
            </label>
            <div class="layui-input-inline">
                <select class="layui-input" id="select" lay-filter="select">
                    <option value="false">不需要</option>
                    <option th:selected="${sysConfig ne null and (sysConfig.value.toLowerCase().indexOf('jpg') > -1 or sysConfig.value.toLowerCase().indexOf('png') > -1)}" value="true">需要</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_value" class="layui-form-label">
                内容
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_value" name="value" required="" lay-verify="required" autocomplete="off" class="layui-input" th:value="${sysConfig eq null ? '' : sysConfig.value}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>

            <div class="layui-upload upload-plugin" style="display: none;">
                <div class="layui-input-block ">
                    <img th:if="${sysConfig ne null and sysConfig.value ne null and (sysConfig.value.toLowerCase().indexOf('jpg') > -1 or sysConfig.value.toLowerCase().indexOf('png') > -1)}" th:src="${#request.getAttribute('uploadServer')} + ${sysConfig.value}" id="L_spriteUrl_pic"  width="250px" height="140px" />
                    <img th:if="${!(sysConfig ne null and sysConfig.value ne null and (sysConfig.value.toLowerCase().indexOf('jpg') > -1 or sysConfig.value.toLowerCase().indexOf('png') > -1))}" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_head.jpg'}" id="L_spriteUrl_pic"  width="250px" height="140px" />
                    <input type="button" value="上传图片" id="upload"/> (800px × 450px)<span class="x-red">*</span>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_description" class="layui-form-label">
                描述
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_description" name="description" required="" lay-verify="required" autocomplete="off" class="layui-input" th:value="${sysConfig eq null ? '' : sysConfig.description}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/common/kindeditor/themes/default/default.css'}">
<script type="text/javascript" th:src="${#request.getAttribute('ctx') + '/static/common/kindeditor/kindeditor-all-min.js'}"></script>

<script>
    /**
     * 图片上传完成回调
     * @param btnId
     * @param imgUrl
     */
    function coverImgCallback(btnId, imgUrl) {
        $("#L_value").val(imgUrl);
        $("#L_spriteUrl_pic").attr("src", fileServer + imgUrl);
    }

    layui.use(['form', 'layer', 'upload'], function(){
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        //自定义验证规则
        form.verify({
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            img: function(value) {
                if(value == null || value == "") {
                    return "请上传图片";
                }
            }
        });

        if(eval($('#select').val())) {
            $('.upload-plugin').show();
            //250 × 140
            initSimpleImageUpload('upload', 'kpoint-cover', coverImgCallback,'',true,'800','450');
        }

        //监听提交
        form.on('submit(add)', function(data){
            $.ajax({
                type: 'post',
                url: '/admin/sysconfig/save',
                data: data.field,
                dataType: 'json',
                beforeSend : function(xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function(result) {
                    if(result.status == 200) {
                        layer.alert(Messages.SUCCESS, {icon: 6}, function () {
                            // get frame index
                            var index = parent.layer.getFrameIndex(window.name);
                            // refresh parent list and close current dialog
                            parent.location.reload();
                            parent.layer.close(index);
                        });
                    } else {
                        layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                        return false;
                    }
                },
                error: function(e) {
                    layer.alert(Messages.ERROR, {icon: 1});
                }
            })
            return false;
        });

        form.on('select(select)', function(data) {
            var is = data.value;
            if(eval(is)) {
                $('.upload-plugin').show();
                //250 × 140
                initSimpleImageUpload('upload', 'kpoint-cover', coverImgCallback,'',true,'250','140');
            } else {
                KindEditor.remove('#upload');
                $('.ke-inline-block').remove();
                $('.upload-plugin').hide();
            }
        })


    });
</script>

</body>
</html>